<template>
	<view class="content">
		<view class="tab">
			<view class="tab-item" v-for="(item, index) in navList" :key="index" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
			{{ `${item.text}(${item.shopNum})` }}	
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="getshoplist">
					<!-- 空白页 -->
					<empty v-if="tabItem.list.length === 0"></empty>
					<!-- 订单列表 -->
					<view class="store">
						<view class="store_content" v-for="(item, index) in tabItem.list" :key="index">
							<view class="content_top" v-if="tabItem.key!=='no'">
								<text>店铺名：{{ item.shop_name }}</text>
							</view>
							<view class="content_bottom">
								<view  v-if="tabItem.key === 'no'" class="no_box">
									<view>店铺编号：{{ item.tenant_serial }}</view>
									<view><button  type="warn" size="small" open-type="share" :data-serial="item">转出</button></view>
								</view>
								<view  v-if="tabItem.key === 'unexpired'"  class="unexpired_box">
									<view>店铺编号：{{ item.tenant_serial }}</view>
									<view><van-button type="danger" size="small" @click="recover(item.id)">回收店铺</van-button></view>
								</view>
								<view v-if="tabItem.key === 'expired'">店铺编号：{{ item.tenant_serial }}</view>
								<view v-if="tabItem.key !== 'no'">手机号：{{ item.shop_phone }}</view>
								<view v-if="tabItem.key !== 'no'">续费时间：{{ item.created_at }}</view>
								<view v-if="tabItem.key !== 'no'">到期时间：{{ item.expired }}</view>
								
								
							</view>
						</view>
					</view>
					<!-- <view class="load">
						<text class="loading-text">
							{{ loadingType === 0 ? contentText.contentdown : loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore }}
						</text>
					</view> -->
					<uni-load-more :status="tabItem.loadingType" ></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import { getOne, msg } from '../../api/publicapi.js'
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			tabCurrentIndex: 0,
			navList: [
				{
					text: '已转出',
					key: 'expired',
					loadingType:'more',
					page:1,
					shopNum:'',
					list: []
				},
				{
					text: '未转出',
					key: 'no',
					loadingType:'more',
					page:1,
					shopNum:'',
					list: []
				},
				{
					text: '已过期',
					key: 'unexpired',
					loadingType:'more',
					page:1,
					shopNum:'',
					list: []
				}
			]
		}
	},
	async onLoad(options) {
		this.shopid = options.id
		this.getshoplist('expired',0)
		this.getshareId()
		this.getshopnum()
	},
	// onReachBottom: function() {
	// 	if (this.loadingType != 0) {
	// 		//loadingType!=0;直接返回
	// 		return false
	// 	}
	// 	this.getshoplist(this.key)
	// },
	methods: {
		getshoplist(key, index) {
			console.log('----', key, index)
			let navItem=this.navList[index]
			uni.showNavigationBarLoading()
			if (key !== navItem.key) {
				this.navList[index].page = 1
				this.navList[index].key = key
				this.navList[index].list = []
			}
			let data = {
				page: navItem.page,
				key: key
			}
			getOne('front/owner/shop', data).then(res => {
				if (res.data.length <= 0) {
					//没有数据
					this.navList[index].loadingType = "noMore"
					uni.hideNavigationBarLoading()
					return false
				} else {
					for (var i = 0; i < res.data.length; i++) {
						this.navList[index].list.push(res.data[i])//将数据拼接在一起
					}
					this.navList[index].page++
					this.navList[index].loadingType = "more"
				}
				console.log(this.navList[index].list)
				console.log('res.dta', res.data)
				uni.hideNavigationBarLoading()
			})
		},
		getshopnum() {
			// console.log('getshopnum',e)
			getOne('front/owner/getshopnum').then(res => {
				console.log('getshopnum',res)
				this.navList[0].shopNum = res.expired
				this.navList[1].shopNum = res.maximum
				this.navList[2].shopNum = res.unexpired
				
				// this.getshoplist(this.navList[1].shopNum)
			})
		},
		changeTab(e) {
			console.log('changeTab', e);
			let key = this.navList[this.tabCurrentIndex].key
			let index = this.tabCurrentIndex
			this.tabCurrentIndex = e.target.current
			this.getshoplist(key, index)
		},
		tabClick(index) {
			this.tabCurrentIndex = index
		},
		getshareId() {
			let share_id
			getOne('front/owner/mminigetshaerid', { product_price: 450 }).then(res => {
				this.share_id = res.data.response
			})
		},	
		//店铺回收
		recover(tenantid) {
			console.log('tenantid',tenantid)
			let data = {
				tenant_id: tenantid
			}
			uni.showModal({
				title: '提示',
				content: '是否回收店铺回收后不可恢复数据，商品以及会员将全部清空 请确认回收前将会员转移到新的店铺再执行此操作',
				confirmColor:'#FF0000',
				success: function(res) {
					if (res.confirm) {
						getOne('front/owner/puttenantshop', data).then(res => {
							if (res.data.response !== null) {
								// console.log(res.data.data.response)
							}
							msg(res.message)
							that.getshopnum()
						});
					} else if (res.cancel) {
						msg('用户点击取消')
					}
				}
			})
		},
	},
	onShareAppMessage(res) {
		let id= this.share_id
		let tenant_serial=''
		//店铺编号
		if(res.target.dataset.serial.tenant_serial!=='undefined'){
			tenant_serial=res.target.dataset.serial.tenant_serial
		}
		console.log('tenant_serial',res.target.dataset.serial.tenant_serial)
		let title = '易度商城店主邀请'
		// if (res.from === 'button') { 
		// 	console.log(res.target)
		// }
		return {
			title: title,
			path:`/pages/tenant/tenant?id=${id}&tenant_serial=${tenant_serial}`,
			imageUrl: "https://edsfiles.oss-cn-shenzhen.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/DIANZHU.jpg",
			desc: '轻松经营无负担，易度帮您备商品。开网店就到易度商城'
		}
	}
}
</script>
<style lang="scss">
page,
.content {
	background: $page-color-base;
	height: 100%;
}

.swiper-box {
	height: calc(100% - 40px);
}
.list-scroll-content {
	height: 100%;
}
.tab {
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;
	.tab-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 15px;
		color: $font-color-dark;
		position: relative;
		&.current {
			color: $base-color;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 44px;
				height: 0;
				border-bottom: 2px solid $base-color;
			}
		}
	}
}
.store {
	.store_content {
		padding: 20upx;
		font-size: 30upx;
		line-height: 2;

		.content_top {
			display: flex;
			justify-content: space-between;
			width: 100%;
			border-radius: 10upx 10upx 0 0;
			border: 1px solid #e2e2e2;
			padding: 10upx;
			margin-bottom: 2upx;
		}

		.content_bottom {
			padding: 15upx;
			border-radius: 0 0 10upx 10upx;
			-webkit-box-shadow: 0 3px 4px #e2e2e2;
			box-shadow: 0 3px 4px #e2e2e2;
			border: 1px solid #e2e2e2;
			line-height: 2;
			.no_box{
				display:flex;
				justify-content: space-between;
				align-items: center;
			}
			.unexpired_box{
				display:flex;
				justify-content: space-between;
				align-items: center;
			}
	
			view {
				margin-bottom: 3upx;
			}
		}
	}
}
</style>
